<template>
	<view class="slot">
		<image style="width: 100%;height: 100%" src="/static/image/icon-mine-bg.png"></image>
		<view class="u-flex u-row-between" style="position: absolute;left:0;top:0;width: 100%;height: 100%;padding: 0 42rpx">
			<view class="left" v-if="isLogin" @click="$u.route('/pages-mine/pages/mine')">
				<u-avatar size="78" src="/static/image/icon-mine-default.png"></u-avatar>
				<view class="info">
					<view class="username">{{ data.name || '微信用户' }}</view>
					<view class="desc">{{ data.Telphone || 'ID:123123123123' }}</view>
				</view>
			</view>
			<view class="left" v-else @click="$u.route('/pages/login/index')">
				<u-avatar size="78" src="/static/image/icon-mine-default.png"></u-avatar>
				<view class="info">
					<view class="username">登录</view>
					<view class="desc">点击登录跳转至登录页面</view>
				</view>
			</view>
			<view class="right"><image src="/static/image/icon-mine-edit.png" style="width: 64rpx;height: 64rpx;" v-if="isLogin"></image></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'user-info',
	props: {
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {};
			}
		},
		isLogin: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.slot {
	position: relative;
	margin: 0 auto;
	z-index: $app-zIndex-normal;
	width: 710rpx;
	height: 180rpx;

	.left {
		display: flex;
		align-items: center;
		.info {
			margin-left: 24rpx;
			display: flex;
			align-content: space-between;
			flex-wrap: wrap;
			.username {
				font-size: 32rpx;
				width: 100%;
				color: $app-theme-text-white-color;
				margin-bottom: 16rpx;
			}
			.desc {
				font-size: 24rpx;
				width: 100%;
				color: $app-theme-text-white-color;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
	.right {
		display: flex;
		align-items: center;
	}
}
</style>
